body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $main-bg-color;
  font-size: 14px;
  @include breakpoint(sm) {
    font-size: $body-font-size;
  }
}

a {
  color: $main-link-color;  // override Primer
}

h1,h2,h3,h4,h5,h6 {
  a {
    color: $main-color;  // override Primer
  }
}

hr {
  border-color: $border-color; // override Primer
  margin-left: $spacer6 !important;
  margin-right: $spacer6 !important;
  @include breakpoint(md) {
    margin-left: $spacer8 !important;
    margin-right: $spacer8 !important;
  }
}

strong {
  color: $main-color-strong;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  margin-bottom: 0; // override Primer
  color: $body-color; // override Primer
}

.text-small {
  font-size: 14px !important;
}

.text-center-sm { @include breakpoint(sm) { text-align: center !important; } }
.text-center-md { @include breakpoint(md) { text-align: center !important; } }
.text-center-lg { @include breakpoint(lg) { text-align: center !important; } }

h1 {                   -webkit-font-smoothing: antialiased; }
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; }
h3 { font-weight: 400; -webkit-font-smoothing: antialiased; }
h4 { font-weight: 500; }
h5 { font-weight: 700; }
h6 { font-weight: 700; }

h2 {
  margin-top: 0;
}

// Fade in lazily loaded images; see /scripts/lazy-load-images.js
img {
	opacity: 1;
	transition: opacity 0.3s;
}

img[data-src] {
	opacity: 0;
}

.faded-out {
  transition: opacity 0.3s;
  opacity: 0;
}

.overflow-hidden {
  overflow: hidden  !important;
}


// add top margin
// to make it easier to see headers within a long wall of text
.strong-headers {
  h1 {                      	  		 font-weight: 300 !important; -webkit-font-smoothing: initial !important; }
  h2 { margin: 1.75em 0 1em !important;   	font-size: 32px !important; font-weight: 300 !important; -webkit-font-smoothing: initial !important; border-bottom: $border !important; }
  h3 { margin: 2em 0 0.75em !important; font-size: 26px !important; font-weight: 300 !important; -webkit-font-smoothing: initial !important; }
  h4 { margin-top: 1.5em !important;   	  		 font-weight: 300 !important; }
  h5 { margin-top: 1.25em !important;  }
  h6 { margin-top: 1.125em !important; }

  &.strong-headers hr { margin: $spacer6 0; }
  h1 { @include breakpoint(lg) { font-size: $body-font-size * 2.75; } }
}

// Responsive video
.video {
  position: relative;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 1em;

  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

kbd {
  -moz-border-radius:3px;
  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  -webkit-border-radius:3px;
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  background-color:#f7f7f7;
  border:1px solid #ccc;
  border-radius:3px;
  box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  color:#333;
  display:inline-block;
  font-family: Arial,Helvetica,sans-serif;
  font-size:11px;
  line-height:1.4;
  margin:0 .1em;
  padding:.1em .6em;
  text-shadow:0 1px 0 #fff;
}

.PRIMER-REMOVE-ME {
  @import "@primer/css/index.scss";
}
